﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <environment include="Development">
        <link rel="stylesheet" href="~/layer/css/layui.css" media="all" />
        <link rel="stylesheet" href="~/layer/css/admin.css" media="all" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="~/layer/css/layui.css" asp-append-version="true" media="all" />
        <link rel="stylesheet" href="~/layer/css/admin.css" asp-append-version="true" media="all" />
    </environment>
</head>
<body id="iosiframe">
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">统计报表</div>
                    <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">日期</label>
                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input" name="startTime" id="startTime" placeholder="开始日期">
                                </div>
                                <div class="layui-form-mid">
                                    -
                                </div>
                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input" name="endTime" id="endTime" placeholder="结束日期">
                                </div>

                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-user-back-search">
                                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="layui-card-body">
                        <div class="layadmin-backlog layadmin-shortcut">
                            <div carousel-item>
                                <ul class="layui-row layui-col-space10">
                                    <li class="layui-col-xs6">
                                        <a href="javascript:;" class="layadmin-backlog-body">
                                            <h3>收入</h3>
                                            <p><cite style="color:#f8a30a; font-size:20px;" id="total">0</cite></p>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs6">
                                        <a href="javascript:;" class="layadmin-backlog-body">
                                            <h3>支出</h3>
                                            <p><cite style="color:#b90d0d; font-size:20px;" id="payTotal">0</cite></p>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs6">
                                        <a href="javascript:;" class="layadmin-backlog-body">
                                            <h3>订单数</h3>
                                            <p><cite id="orderCount" style="font-size:20px;">0</cite></p>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs6">
                                        <a href="javascript:;" class="layadmin-backlog-body">
                                            <h3>销售</h3>
                                            <p><cite id="saleCount" style="font-size:20px;">0</cite></p>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <hr />
                        <div class="layadmin-dataview" id="main">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="~/layer/layui.js"></script>
    <script>
            layui.config({
                base: '../../layer/' //静态资源所在路径
            }).extend({
                index: 'index' //主入口模块
                }).use(['index', 'echarts', 'laydate', 'form','layer'], function () {
                    var $ = layui.$
                        , form = layui.form
                        , laydate = layui.laydate
                        , layer = layui.layer
                        , echarts;

                    var ua = navigator.userAgent.toLowerCase();
                    var screenwidth = window.screen.width;
                    if (!/iphone|ipad|ipod/.test(ua)) {
                        $("#iosiframe").attr("scrolling", "auto");
                    } else {
                        $('#iosiframe').width(screenwidth + 'px');
                    }

                    //form.render();

                    var insStart = laydate.render({
                        elem: '#startTime'
                        , value: '@ViewBag.StartDate'
                        , max: '@ViewBag.EndDate'
                        , done: function (value, date) {
                            //更新结束日期的最小日期
                            insEnd.config.min = lay.extend({}, date, {
                                month: date.month - 1
                            });

                            //自动弹出结束日期的选择器
                            insEnd.config.elem[0].focus();
                        }
                    });

                    //结束日期
                    var insEnd = laydate.render({
                        elem: '#endTime'
                        , value: '@ViewBag.EndDate'
                        , max : '@ViewBag.EndDate'
                        , done: function (value, date) {
                            //更新开始日期的最大日期
                            insStart.config.max = lay.extend({}, date, {
                                month: date.month - 1
                            });
                        }
                    });


                    var getChartsInfo = function (data) {
                        echarts.clear();

                        echarts.setOption({
                            color: ["#009688", "#1E9FFF", "#5FB878", "#FFB980", "#D87A80", "#8d98b3", "#e5cf0d", "#97b552", "#95706d", "#dc69aa", "#07a2a4", "#9a7fd1", "#588dd5", "#f5994e", "#c05050", "#59678c", "#c9ab00", "#7eb00a", "#6f5553", "#c14089"],
                            toolbox: {
                                show: true,
                                feature: {
                                    magicType: { type: ['line', 'bar'] },
                                    restore: {},
                                    saveAsImage: {}
                                }
                            }
                        });

                        var loadindex = layer.load(1, { shade: 0.8 });

                        $.ajax({
                            url: '@Url.Action("IncomeCharts", "api")',
                            dataType: 'json',
                            data: data,
                            type: 'get',
                            beforeSend: function () {
                                layer
                                echarts.showLoading({
                                    text: '加载中',
                                    color: '#009688',
                                    textColor: '#000',
                                    maskColor: 'rgba(255, 255, 255, 0.8)',
                                    zlevel: 0
                                });
                            }
                        }).fail(function (jqXHR, textStatus, errorThrown) {
                            alert(errorThrown, { icon: 2, title: textStatus });
                        }).done(function (res) {
                            console.log(res);
                            var data = res.data;

                            $('#orderCount').text(data.orderCount);
                            $('#saleCount').text(data.saleCount);
                            $('#total').text(data.total);
                            $('#payTotal').text(data.payTotal);

                            if (res.code == 0) {
                                var option = data.echarts;

                                echarts.setOption(option);
                            }
                        }).always(function () {
                            layer.close(loadindex);
                            echarts.hideLoading();
                        });
                    }


                    if ($('#main') && $('#main').length > 0) {
                        echarts = layui.echarts.init($('#main')[0]);


                        var startTime = $('#startTime').val()
                            , endTime = $('#endTime').val();

                        getChartsInfo({ startTime: startTime, endTime: endTime, type: 0 });


                        form.on('submit(LAY-user-back-search)', function (data) {
                            var field = data.field;

                            //执行重载
                            getChartsInfo(field);
                        });
                    }
                });
    </script>
</body>
</html>